<script setup lang="ts">
import {ref} from "vue"

interface propsInterface {
  icon: string;
  size?: string | number;
  color?: string;
  backgroundColor?: string;
  customStyle?:Record<string, string>;
}

const handleFontSize = (size: string | number): string => {
  const regx = /[a-z]+/
  const result = regx.test(size + '')
  return result ? size + '' : size + 'rpx'
}
const {icon, size, color, backgroundColor,customStyle} = defineProps<propsInterface>()
const iconStyle = ref({
  color: color ? color : '#ffffff',
  backgroundColor: backgroundColor ? backgroundColor : '#4ac568',
  fontSize: size ? handleFontSize(size) : '80rpx'
})

</script>

<template>
  <view :class="['icon','iconfont', 'icon-'+icon]" :style="[iconStyle,customStyle]"></view>
</template>

<style scoped>
.icon {
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
</style>